<script>
import { onMounted, ref, toRefs } from 'vue'
import axios from "axios";
import Cookies from 'js-cookie'

export default {
  props: {
    value: {
      type: String,
    },
    filterable:{
      type: [String, Boolean],
    },
    //请求路径
    httpUrl: {
      type: String,
    },
    //请求参数
    httpParams: {
      type: Object
    },
    //请求结果指定参数名作为select的key
    selectKey: {
      type: String,
      default: "id"
    },
    //请求结果指定参数名作为select的label
    selectLabel: {
      type: String,
    },
    //固定数据、不需要通过访问网络获取
    staticData: {
      type: String
    }
  },
  model: {
    prop: 'value', // v-model选择prop中传递名(名字可以任意起、不一定非是value)
    event: 'updateParentValue' // 定义事件\名字可以任意起
  },
  data() {
    return {
      childValue: "",
      options: [],
    }
  },
  methods: {
    getSelectData() {
      //固定数据
      if (this.$props.httpUrl == undefined) {
        debugger
        //解析staticData
        var data = this.$props.staticData;
        //staticData数据格式 0-山东,1-河南,2-安徽
        // 其中0- 1- 2-可以省略、如果省略了 那么value和label一致
        var arr = data.split(",")
        for(let item of arr){
          let itemArr = item.split("-");
          let map = new Map();
          if(itemArr.length == 1){
            map["key"] = itemArr[0];
            map["label"] = itemArr[0];
            this.options.push(map);
          }else{
            map["key"] = itemArr[0];
            map["label"] = itemArr[1];
            this.options.push(map);
          }
        }
        this.$props.selectKey = "key";
        this.$props.selectLabel = "label";
      } else{
        let url = window.SITE_CONFIG['apiURL'] + this.$props.httpUrl + "?token=" + Cookies.get('token')
        console.log(url)
        axios({
          method: 'post',
          url: url,
          data: this.$props.httpParams,
        }).then(response => {
          this.options = response.data.data;
          console.log("sg-select请求结果 ==> ", this.options)
        })
      }
    },
    changeNum(val) {
      this.$emit('updateParentValue', val) // 使用$emit触发事件并传值\ 第一个参数名字 需要跟model属性里定义的一致
    }
  },
  setup() {
    onMounted(() => {
      // 执行挂载后要做的事情
      // debugger
    });
  },
  mounted() {
    this.getSelectData();
  },
  watch: {
    //检测props中的value属性
    value(val) {
      this.childValue = val;
    }
  }
}


</script>

<template>
  <el-select v-model="childValue" @change="changeNum" size="large" :filterable="this.$props.filterable">
    <el-option v-for="item in options" :key="item[selectKey]" :label="item[selectLabel]" :value="item[selectKey]" />
  </el-select>
</template>

<style scoped></style>
